<template>
    <div class="transfer-account page">
        <div class="con">
            <div class="user">
                <img :src="user.avatar" alt="" class="avatar">
                <span class="name">{{user.name}}（{{user.code}})</span>
            </div>

            <div class="form">
                <div class="form-con ">
                    <span class="title">转账金额</span>
                    <div class="inputs border-bottom-1px">
                        <span class="icon">￥</span>
                        <input ref="in" @keyup="changeValue" class="inp" v-model="temp.amount" type="number">
                    </div>
                    <span @click="showAlert" class="remark">添加转账说明</span>
                </div>

            </div>
            <div class="btn" @click="transferAccount">确认转账</div>
        </div>
    </div>
</template>

<script>
    import {transferAccount} from "@/api/account";
    import {info} from "@/api/user";
    import {clearNoNum} from "../../common/js/num";
    import {showInfo} from "../../toast";

    export default {
        name: "account",
        activated() {
            this.temp.toUserId = this.$route.query.userId
            this.temp.type = this.$route.query.type
            this.temp.amount = null
            this.temp.remark = null
            info(this.temp.toUserId).then(res => {
                this.user = res.data
            })
        },
        data() {
            return {
                user: null,
                temp: {
                    toUserId: null,
                    amount: null,
                    type: null,
                    remark: null
                }
            }
        },
        methods: {
            changeValue() {

                this.temp.amount = clearNoNum(this.temp.amount)

                // console.log(this.$refs.in.value)
                // this.$refs.in.value = this.temp.amount
                // console.log('---'+this.temp.amount)
            },
            transferAccount() {
                if (!this.temp.amount || this.temp.amount < 0) {
                    showInfo("输入有误!","warn")
                }else {
                    transferAccount(this.temp).then(res => {
                        this.$createDialog({
                            type: 'alert',
                            title: '操作成功!',
                            onConfirm: (e, promptValue) => {
                              this.$router.go(-1)
                            }
                        }).show()
                    })
                }

            },
            showAlert() {
                this.$createDialog({
                    type: 'prompt',
                    title: '备注',
                    prompt: {
                        value: '',
                        placeholder: '请输入'
                    },
                    onConfirm: (e, promptValue) => {
                        this.temp.remark = promptValue
                        // this.$createToast({
                        //     type: 'warn',
                        //     time: 1000,
                        //     txt: `Prompt value: ${promptValue || ''}`
                        // }).show()
                    }
                }).show()
            }
        }
    }
</script>

<style scoped lang="stylus">
    .transfer-account
        background url("~@/assets/hbg.png") no-repeat #FFFFFF
        background-size 100% auto
        z-index 2
        height 100%

        .con
            padding 0px 10px 0

        .user
            height 95px
            display flex
            justify-content center
            align-items center
            flex-direction column

            .avatar
                width 40px
                height 40px
                border-radius 5px

            .name
                margin-top 9px
                font-size: 14px;
                font-family: PingFang SC;
                color: rgba(78, 61, 7, 1);

        .form
            overflow hidden
            padding 20px 30px
            margin-top 10px
            font-size 0

            .form-con
                .title
                    font-size: 12px;
                    font-family: PingFang SC;
                    color: rgba(78, 61, 7, 1);

                .inputs
                    border-bottom-color #DCDCDC
                    height 70px
                    display flex
                    align-items center
                    margin-left -8px
                    margin-bottom 15px

                    .icon
                        font-size: 35px;
                        font-family: PingFang SC;
                        font-weight: 600;
                        color: rgba(78, 61, 7, 1);

                    .inp
                        outline none
                        border none
                        height 35px
                        font-size 24px

                .remark
                    font-size: 12px;
                    font-family: PingFang SC;
                    color: rgba(247, 137, 94, 1);

        .btn
            height 44px
            background: rgba(247, 137, 94, 1);
            border-radius: 7px;
            text-align center
            color white
            font-size 14px
            line-height 44px


</style>